<template>
  <view class="container" :style="appThemeStyle">
    <view class="main-header" @click="toStore">
      <view class="user-info">
        <view class="user-avatar">
          <avatar-image :url="$image('/storeminiapp/user_photo_default.png')" :width="128" />
        </view>
        <view class="user-content">
          <view class="nick-name oneline-hide">{{ userInfo.nickName }}</view>
          <view class="shop-name">{{ store.shopName }}</view>
          <view class="desc">[{{ getWorkbench }}]</view>
          <view class="switches" v-if="pickerStatus">
            <view
              class="switch-item"
              v-for="(item, index) in ['在线', '休息']"
              :key="item"
              :class="{'active': switchIndex === index}"
              @click.stop="switchItem(index)"
            >
              <text>{{item}}</text>
            </view>
            <view class="active-bar" :style="activeStyle"></view>
          </view>
        </view>
      </view>
      <text v-show="$checkModule('ly_user_store_change')" class="iconfont icon-arrow-right"></text>
    </view>
    <view class="card-wrap">
      <view class="pickup" @click="toPickup">
        <view class="pickup__info">
          <view class="user-avatar">
            <avatar-image :url="shopLogo(pickup.logo)" :width="128" borderRadius="10%"/>
          </view>
          <view class="pickup__info__content" v-if="!isEmpty(pickup)">
            <view class="pick-name oneline-hide">{{ pickup.pickUpName }}</view>
            <view class="desc">营业时间：{{ pickup.beginTime + '-' + pickup.endTime }}</view>
            <view class="desc">自提地址：{{ pickup.address }}</view>
          </view>
          <view class="pickup__info__content" v-else>未启用自提点</view>
        </view>
        <text v-show="$checkModule('ly_user_pickup_change')" class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <view class="card-wrap">
      <view
        class="card-item"
        v-for="(item, index) in service"
        :key="index"
        @click="$navTo(item.path)"
      >
        <view class="area">
          <text class="iconfont" :class="item.icon"></text>
          <text class="name">{{ item.name }}</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <view class="btn-wrap">
      <u-button type="primary" :customStyle="{ height: '90rpx' }" @click="handleLogout">退出登录</u-button>
    </view>
    <!-- 动态TabBar -->
    <TabBar/>
  </view>
</template>
<script>
import store from '@/store'
import storage from '@/utils/storage'
import { SELECT_PICKUP_ID } from "@/store/mutation-types"
import { isEmpty } from '@/utils/util'
import AvatarImage from '@/components/avatar-image'
import TabBar from "@/components/tabbar"
import PickerStatusEnum from "@/common/enum/setting/pickerStatus"
import PickOrderStatusEnum from '@/common/enum/order/pickOrderStatus'
import SettingModal from '@/common/model/Setting'
import * as PickApi from "@/api/order/pick";

const service = [
  {
    name: '修改密码',
    icon: 'icon-setting',
    path: 'pages/user/pass'
  },
  {
    name: '关于我们',
    icon: 'icon-question-circle',
    path: 'pages/user/about'
  }
]

export default {
  name: "index",
  components: {
    TabBar,
    AvatarImage
  },
  data() {
    return {
      PickerStatusEnum,
      isEmpty,
      service,
      switchIndex: 0
    }
  },
  computed: {
    userInfo() {
      return store.getters.userInfo
    },
    store() {
      return store.getters.store
    },
    counter() {
      return store.getters.counter
    },
    businessType() {
      return store.getters.businessType
    },
    pickups() {
      return store.getters.pickups
    },
    pickup() {
      return store.getters.pickup
    },
    shopLogo() {
      return (val) => {
        if (val) {
          return val
        }
        return this.$image('/storeminiapp/icon_tenant.png')
      }
    },
    getWorkbench() {
      switch (this.businessType) {
        case 0 : return '总部工作台'
        case 1 : return '门店工作台'
        case 2 : return '店铺工作台-' + this.counter.storeName
      }
    },
    activeStyle() {
      const x = 72 * this.switchIndex
      return {
        transform: `translate3d(${x}rpx, 0, 0)`
      }
    },
    pickerStatus() {
      return store.getters.pickerStatus
    },
    pickConfig() {
      return store.getters.pickConfig
    },
  },
  onLoad() {
    uni.$on('selectPickupId', this.onSelectPickupId)
  },
  onShow() {
    this.switchIndex = this.pickerStatus === PickerStatusEnum.REST.value ? 1 :0
  },
  onUnload() {
    // 组件销毁时移除事件监听
    uni.$off('selectPickupId')
  },
  methods: {
    async switchItem(index) {
      if (index === 0) return this.setPickUser(PickerStatusEnum.LEISURE.value, index)
      if (this.pickerStatus && await this.hasPickOrders()) return this.$toast('有未完成的拣货任务，不可置休!')
      this.setPickUser(PickerStatusEnum.REST.value, index)
    },
    setPickUser(pickStatus, index) {
      SettingModal.setPickUser(pickStatus).then(() => {
        this.switchIndex = index
      })
    },
    onSelectPickupId(id) {
      const item = this.pickups.find(val => val.pickupId === id);
      if (item) {
        storage.set(this.store.id + SELECT_PICKUP_ID, item.pickupId);
        store.commit('SET_PICKUP', item);
      } else {
        storage.set(this.store.id + SELECT_PICKUP_ID, -1);
        store.commit('SET_PICKUP', {});
      }
    },
    // 判断是否有待拣货或拣货中的单子
    hasPickOrders() {
      return PickApi.getPickList({
        pickType: this.pickConfig.pickType,
        current: 1,
        statusList: `${PickOrderStatusEnum.WAIT_PICKING.value}, ${PickOrderStatusEnum.PICKING.value}`
      }, {load: false})
        .then(({ data }) => data?.length)
        .catch(() => {
          return false
        })
    },
    async handleLogout() {
      if (this.pickerStatus && await this.hasPickOrders()) return this.$toast('有未完成的拣货任务，不可退出!')
      const bool = this.pickerStatus === PickerStatusEnum.LEISURE.value || this.pickerStatus === PickerStatusEnum.BUSY.value
      const content = bool ? '是否退出登录并置为休息状态?' : '您确定要退出登录吗?'
      uni.showModal({
        title: '友情提示',
        content,
        success: res => {
          if (res.confirm) {
            if (bool) SettingModal.setPickUser(PickerStatusEnum.REST.value, true)
            store.dispatch('Logout', true).then(() => this.handleLogin())
          }
        }
      })
    },
    toStore() {
      if (!this.$checkModule('ly_user_store_change')) return this.$toast('未开通切换权限')
      this.$navTo('pages/store/index')
    },
    toPickup() {
      if (!this.$checkModule('ly_user_pickup_change')) return this.$toast('未开通切换权限')
      this.$navTo('pages/pickup/index')
    },
    // 跳转到登录页
    handleLogin() {
      this.$navTo('pages/login/index', {}, 'redirectTo')
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .main-header {
    padding: 176rpx 32rpx 72rpx;
    background: linear-gradient(288deg, #3C42ED 7.06%, #567BF7 96.47%);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .user-info {
      display: flex;
      align-items: center;

      .user-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20rpx;
        color: #FFFFFF;

        .nick-name {
          font-size: 32rpx;
          font-weight: bold;
          max-width: 300rpx;
        }

        .shop-name {
          margin-top: 8rpx;
          font-size: 28rpx;
        }

        .desc {
          margin-top: 6rpx;
          font-size: 24rpx;
        }

        .switches {
          display: flex;
          position: relative;
          align-items: center;
          width: 144rpx;
          margin-top: 14rpx;
          border-radius: 8rpx;
          background: #92A0F7;

          .switch-item {
            position: relative;
            z-index: 10;
            flex: 1;
            height: 40rpx;
            line-height: 40rpx;
            text-align: center;
            font-size: 20rpx;
            color: #FFFFFF;

            &.active {
              color: #2D71FD;
            }
          }

          .active-bar {
            position: absolute;
            left: 0;
            top: 0;
            width: 72rpx;
            height: 40rpx;
            transition: transform 0.3s;
            border-radius: 10rpx;
            background: #fff;
          }
        }
      }
    }
  }

  .icon-arrow-right {
    font-size: 40rpx;
    color: #ccc;
  }

  .card-wrap {
    padding: 24rpx;
    background: #fff;
    border-radius: 16rpx;
    margin: 24rpx;

    .pickup {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &__info {
        display: flex;
        align-items: center;

        &__content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 16rpx;
          color: #333;

          .pick-name {
            font-size: 28rpx;
            font-weight: 500;
            margin-bottom: 10rpx;
            max-width: 450rpx;
          }

          .desc {
            font-size: 24rpx;
            color: #666;
            line-height: 40rpx;
          }
        }
      }
    }

    .card-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border: none;
      }

      .area {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        color: #333333;

        .iconfont {
          font-size: 36rpx;
        }

        .name {
          margin-left: 16rpx;
        }
      }
    }
  }

  .btn-wrap {
    width: 90%;
    position: fixed;
    bottom: 150rpx;
    left: 50%;
    transform: translateX(-50%);
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));
  }
}
</style>
